<template>
    <div class="page">

        <div class="love-declaration-up" v-show="!showBackground">
            <img src="@/assets/images/love/ljj.jpg" alt="ljj" />
            <img src="@/assets/images/love/cat.gif" alt="cat" />
            <img src="@/assets/images/love/zhc.jpg" alt="zhc" />
            <p id="companionMethods"></p>
        </div>
        <div class="love-declaration" v-show="showBackground">
        </div>
        <!-- /* From Uiverse.io by Yaksh37 */  -->
        <div class="btn-container">
            <button id="space-btn" name="space-button" type="submit" @click="toggleBackground">
                <span>{{ msg }}</span>
                <div style="position: absolute; left: 119.273px; top: 18.0747px; animation-delay: 3.37051s; transform: scale(0.196521);"
                    class="star"></div>
                <div style="position: absolute; left: 166.774px; top: 47.4519px; animation-delay: 3.03913s; transform: scale(0.33078);"
                    class="star"></div>
                <div style="position: absolute; left: 238.677px; top: 19.6434px; animation-delay: 3.85796s; transform: scale(1.29037);"
                    class="star"></div>
                <div style="position: absolute; left: 22.2022px; top: 4.69534px; animation-delay: 4.9415s; transform: scale(1.82231);"
                    class="star"></div>
                <div style="position: absolute; left: 206.74px; top: 40.7685px; animation-delay: 1.59195s; transform: scale(1.01375);"
                    class="star"></div>
                <div style="position: absolute; left: 241.531px; top: 14.2516px; animation-delay: 1.67616s; transform: scale(0.811597);"
                    class="star"></div>
                <div style="position: absolute; left: 14.754px; top: 25.2924px; animation-delay: 0.0348248s; transform: scale(0.102529);"
                    class="star"></div>
                <div style="position: absolute; left: 220.444px; top: 43.9803px; animation-delay: 1.5106s; transform: scale(0.16088);"
                    class="star"></div>
                <div style="position: absolute; left: 95.948px; top: 54.8942px; animation-delay: 3.18662s; transform: scale(1.7822);"
                    class="star"></div>
                <div style="position: absolute; left: 30.3484px; top: 36.5984px; animation-delay: 4.30868s; transform: scale(1.16326);"
                    class="star"></div>
                <div style="position: absolute; left: 184.622px; top: 20.0923px; animation-delay: 2.83829s; transform: scale(1.27781);"
                    class="star"></div>
                <div style="position: absolute; left: 142.1px; top: 22.3542px; animation-delay: 2.73988s; transform: scale(1.62715);"
                    class="star"></div>
                <div style="position: absolute; left: 145.079px; top: 6.97553px; animation-delay: 0.0408754s; transform: scale(0.468075);"
                    class="star"></div>
                <div style="position: absolute; left: 6.67886px; top: 38.4849px; animation-delay: 3.84019s; transform: scale(0.272217);"
                    class="star"></div>
                <div style="position: absolute; left: 201.17px; top: 39.9168px; animation-delay: 2.93587s; transform: scale(0.521258);"
                    class="star"></div>
                <div style="position: absolute; left: 224.215px; top: 42.9903px; animation-delay: 0.895495s; transform: scale(0.0458902);"
                    class="star"></div>
                <div style="position: absolute; left: 42.2308px; top: 9.78383px; animation-delay: 4.58407s; transform: scale(0.0422065);"
                    class="star"></div>
                <div style="position: absolute; left: 91.2734px; top: 14.0408px; animation-delay: 2.05927s; transform: scale(0.11997);"
                    class="star"></div>
                <div style="position: absolute; left: 35.6985px; top: 52.6403px; animation-delay: 3.07343s; transform: scale(0.672992);"
                    class="star"></div>
                <div style="position: absolute; left: 76.4191px; top: 48.453px; animation-delay: 2.35679s; transform: scale(1.46957);"
                    class="star"></div>
                <div style="position: absolute; left: 184.503px; top: 4.18267px; animation-delay: 1.43409s; transform: scale(0.606616);"
                    class="star"></div>
                <div style="position: absolute; left: 221.039px; top: 54.2493px; animation-delay: 2.92356s; transform: scale(0.638665);"
                    class="star"></div>
                <div style="position: absolute; left: 185.612px; top: 44.3px; animation-delay: 1.36401s; transform: scale(1.65012);"
                    class="star"></div>
                <div style="position: absolute; left: 154.027px; top: 45.9848px; animation-delay: 3.723s; transform: scale(1.4118);"
                    class="star"></div>
                <div style="position: absolute; left: 220.591px; top: 4.95194px; animation-delay: 0.363098s; transform: scale(0.52369);"
                    class="star"></div>
                <div style="position: absolute; left: 236.028px; top: 11.1663px; animation-delay: 3.67493s; transform: scale(0.956478);"
                    class="star"></div>
                <div style="position: absolute; left: 110.241px; top: 20.2684px; animation-delay: 2.94906s; transform: scale(1.2193);"
                    class="star"></div>
                <div style="position: absolute; left: 12.602px; top: 19.8836px; animation-delay: 4.072s; transform: scale(1.49026);"
                    class="star"></div>
                <div style="position: absolute; left: 30.0911px; top: 37.9746px; animation-delay: 1.02002s; transform: scale(1.41008);"
                    class="star"></div>
                <div style="position: absolute; left: 62.3096px; top: 9.64604px; animation-delay: 3.9445s; transform: scale(0.231214);"
                    class="star"></div>
                <div style="position: absolute; left: 44.7189px; top: 32.4307px; animation-delay: 4.78921s; transform: scale(0.359408);"
                    class="star"></div>
                <div style="position: absolute; left: 191.866px; top: 27.151px; animation-delay: 1.34451s; transform: scale(1.13484);"
                    class="star"></div>
                <div style="position: absolute; left: 47.6744px; top: 3.00604px; animation-delay: 1.04567s; transform: scale(0.682023);"
                    class="star"></div>
                <div style="position: absolute; left: 98.6225px; top: 49.6115px; animation-delay: 2.41384s; transform: scale(1.96254);"
                    class="star"></div>
                <div style="position: absolute; left: 57.4785px; top: 29.6588px; animation-delay: 3.3569s; transform: scale(1.53118);"
                    class="star"></div>
                <div style="position: absolute; left: 13.2213px; top: 24.538px; animation-delay: 1.69582s; transform: scale(1.6236);"
                    class="star"></div>
                <div style="position: absolute; left: 131.656px; top: 31.1837px; animation-delay: 1.29918s; transform: scale(1.84486);"
                    class="star"></div>
                <div style="position: absolute; left: 56.9067px; top: 51.9904px; animation-delay: 4.74375s; transform: scale(0.749788);"
                    class="star"></div>
                <div style="position: absolute; left: 82.8361px; top: 54.3876px; animation-delay: 1.28648s; transform: scale(0.566118);"
                    class="star"></div>
                <div style="position: absolute; left: 193.213px; top: 43.9428px; animation-delay: 0.390178s; transform: scale(1.411);"
                    class="star"></div>
                <div style="animation-delay: 1.2122s;" class="shooting-star shooting-star-1"></div>
                <div style="animation-delay: 0.777895s;" class="shooting-star shooting-star-2"></div>
                <div style="animation-delay: 4.90483s;" class="shooting-star shooting-star-3"></div>
                <div style="animation-delay: 3.66012s;" class="shooting-star shooting-star-4"></div>
            </button>
        </div>

    </div>

</template>

<script setup>
import TypeIt from 'typeit';
import { ref, reactive, onMounted } from 'vue';
const showBackground = ref(false)
const msg = ref('快去看看吧')

const toggleBackground = () => {
    showBackground.value = !showBackground.value
    msg.value = showBackground.value ? '返回' : '快去看看吧'
}
onMounted(() => {
    //   new TypeIt("#companionMethods", {
    //     strings: ["This is a simple string.","This is a simple stringasdf","This is a simple stringasdfafs"],
    //     speed: 50,
    //     waitUntilVisible: true,
    //   }).go();
    new TypeIt("#companionMethods", {
        lifeLike: false,
        speed: 0,
    })
        .type("B")
        .pause(428)
        .type("B")
        .pause(486)
        .type(" ")
        .pause(311)
        .type(" ")
        .pause(873)
        .type("b")
        .pause(94)
        .type("u")
        .pause(424)
        .type("z")
        .pause(118)
        .type("h")
        .pause(30)
        .type("i")
        .pause(447)
        .delete(5, { instant: true })
        .type("不知")
        .pause(423)
        .type("b")
        .pause(117)
        .type("u")
        .pause(188)
        .type("j")
        .pause(184)
        .type("u")
        .pause(177)
        .type("e")
        .delete(5, { instant: true })
        .type("不觉")
        .pause(423)
        .type("w")
        .pause(94)
        .type("o")
        .pause(425)
        .type("m")
        .pause(133)
        .type("e")
        .pause(117)
        .type("n")
        .pause(423)
        .delete(5, { instant: true })
        .type("我们")
        .pause(467)
        .type("y")
        .pause(52)
        .type("i")
        .pause(298)
        .type("j")
        .pause(533)
        .delete(3, { instant: true })
        .type("已经")
        .pause(1345)
        .type("z")
        .pause(61)
        .type("a")
        .pause(108)
        .type("i")
        .pause(384)
        .delete(3, { instant: true })
        .type("在")
        .pause(196)
        .type("y")
        .pause(74)
        .type("i")
        .pause(113)
        .type("q")
        .pause(117)
        .type("i")
        .pause(312)
        .delete(4, { instant: true })
        .type("一起")
        .pause(253)
        .type("1")
        .pause(478)
        .type("8")
        .pause(707)
        .type("7")
        .pause(370)
        .type("3")
        .pause(528)
        .type("t")
        .pause(267)
        .type("i")
        .pause(95)
        .type("a")
        .pause(93)
        .type("n")
        .pause(275)
        .delete(4, { instant: true })
        .type("天")
        .pause(187)
        .type("l")
        .pause(123)
        .type("e")
        .pause(199)
        .delete(2, { instant: true })
        .type("了")
        .pause(241)
        .type("，")
        .pause(241)
        .break()
        .type("j")
        .pause(72)
        .type("i")
        .pause(160)
        .type("n")
        .pause(241)
        .type("t")
        .pause(496)
        .delete(4, { instant: true })
        .type("今天")
        .pause(454)
        .type("s")
        .pause(166)
        .type("h")
        .pause(93)
        .type("i")
        .pause(387)
        .delete(3, { instant: true })
        .type("是")
        .pause(196)
        .type("w")
        .pause(238)
        .type("o")
        .pause(287)
        .type("m")
        .pause(155)
        .type("e")
        .pause(73)
        .type("n")
        .pause(446)
        .delete(5, { instant: true })
        .type("我们")
        .pause(423)
        .type("d")
        .pause(92)
        .type("e")
        .pause(321)
        .delete(2, { instant: true })
        .type("的")
        .pause(312)
        .type("d")
        .pause(184)
        .type("i")
        .pause(682)
        .delete(2, { instant: true })
        .type("第")
        .pause(397)
        .type("s")
        .pause(203)
        .type("i")
        .pause(652)
        .delete(2, { instant: true })
        .type("四")
        .pause(212)
        .type("g")
        .pause(93)
        .type("e")
        .pause(206)
        .delete(2, { instant: true })
        .type("个")
        .pause(1119)
        .type("j")
        .pause(122)
        .type("i")
        .pause(417)
        .type("e")
        .pause(308)
        .type("h")
        .pause(125)
        .type("u")
        .pause(289)
        .type("n")
        .pause(491)
        .type("z")
        .pause(491)
        .type("n")
        .pause(491)
        .delete(8, { instant: true })
        .type("结婚周年")
        .pause(247)
        .type("j")
        .pause(114)
        .type("i")
        .pause(555)
        .type("n")
        .pause(157)
        .type("i")
        .pause(133)
        .type("a")
        .pause(74)
        .type("n")
        .pause(474)
        .delete(6, { instant: true })
        .type("纪念")
        .pause(132)
        .type("r")
        .pause(97)
        .type("i")
        .pause(274)
        .delete(2, { instant: true })
        .type("日")
        .pause(117)
        .type("，")
        .break()
        .pause(434)
        .type("w")
        .pause(134)
        .type("o")
        .pause(237)
        .delete(2, { instant: true })
        .type("我")
        .pause(267)
        .type("y")
        .pause(134)
        .type("e")
        .pause(398)
        .delete(2, { instant: true })
        .type("也")
        .pause(225)
        .type("b")
        .pause(92)
        .type("u")
        .pause(135)
        .type("z")
        .pause(147)
        .type("h")
        .pause(93)
        .type("i")
        .pause(292)
        .type("d")
        .pause(138)
        .type("a")
        .pause(61)
        .type("o")
        .pause(290)
        .delete(8, { instant: true })
        .type("不知道")
        .pause(524)
        .type("g")
        .pause(92)
        .type("a")
        .pause(144)
        .type("i")
        .pause(294)
        .delete(3, { instant: true })
        .type("该")
        .pause(129)
        .type("z")
        .pause(75)
        .type("h")
        .pause(48)
        .type("u")
        .pause(167)
        .type("n")
        .pause(167)
        .type("b")
        .pause(353)
        .delete(5, { instant: true })
        .type("准备")
        .pause(112)
        .type("s")
        .pause(125)
        .type("h")
        .pause(111)
        .type("e")
        .pause(73)
        .type("n")
        .pause(166)
        .type("m")
        .pause(42)
        .type("e")
        .pause(124)
        .delete(6, { instant: true })
        .type("什么")
        .pause(192)
        .type("l")
        .pause(172)
        .type("i")
        .pause(137)
        .type("w")
        .pause(112)
        .type("u")
        .pause(366)
        .delete(4, { instant: true })
        .type("礼物")
        .pause(611)
        .type("s")
        .pause(100)
        .type("o")
        .pause(168)
        .type("n")
        .pause(174)
        .type("g")
        .pause(299)
        .delete(4, { instant: true })
        .type("送")
        .pause(172)
        .type("g")
        .pause(92)
        .type("e")
        .pause(104)
        .type("i")
        .pause(161)
        .delete(3, { instant: true })
        .type("给")
        .pause(182)
        .type("n")
        .pause(77)
        .type("i")
        .pause(488)
        .delete(2, { instant: true })
        .type("你")
        .pause(280)
        .type("，")
        .pause(453)
        .type("b")
        .pause(114)
        .type("i")
        .pause(380)
        .type("j")
        .pause(616)
        .delete(3, { instant: true })
        .type("毕竟")
        .pause(818)
        .type("m")
        .pause(134)
        .type("e")
        .pause(70)
        .type("i")
        .pause(1103)
        .delete(3, { instant: true })
        .type("没")
        .pause(212)
        .type("q")
        .pause(137)
        .type("i")
        .pause(121)
        .type("a")
        .pause(104)
        .type("n")
        .pause(572)
        .delete(4, { instant: true })
        .type("钱")
        .pause(753)
        .type("!")
        .pause(753)
        .delete(1, { instant: true })
        .pause(82)
        .delete(1, { instant: true })
        .pause(82)
        .delete(1, { instant: true })
        .pause(82)
        .delete(1, { instant: true })
        .pause(82)
        .delete(1, { instant: true })
        .pause(282)
        .delete(1, { instant: true })
        .pause(282)
        .delete(1, { instant: true })
        .pause(282)
        .delete(1, { instant: true })
        .pause(282)
        .delete(1, { instant: true })
        .pause(282)
        .delete(1, { instant: true })
        .pause(282)
        .delete(1, { instant: true })
        .pause(382)
        .delete(1, { instant: true })
        .pause(482)
        .delete(1, { instant: true })
        .pause(582)
        .delete(1, { instant: true })
        .pause(682)
        .delete(1, { instant: true })
        .type("z")
        .pause(179)
        .type("h")
        .pause(93)
        .type("u")
        .pause(158)
        .type("a")
        .pause(104)
        .type("n")
        .pause(1657)
        .delete(1)
        .pause(151)
        .delete(1)
        .pause(637)
        .type("n")
        .pause(241)
        .type("b")
        .pause(409)
        .delete(5, { instant: true })
        .type("准备")
        .pause(240)
        .type("y")
        .pause(73)
        .type("i")
        .pause(133)
        .type("d")
        .pause(80)
        .type("i")
        .pause(90)
        .type("a")
        .pause(79)
        .type("n")
        .pause(138)
        .delete(6, { instant: true })
        .type("一点")
        .pause(134)
        .type("s")
        .pause(427)
        .type("h")
        .pause(154)
        .type("e")
        .pause(124)
        .type("n")
        .pause(148)
        .type("m")
        .pause(83)
        .type("e")
        .pause(150)
        .delete(6, { instant: true })
        .type("什么")
        .pause(172)
        .type("g")
        .pause(114)
        .type("e")
        .pause(104)
        .type("i")
        .pause(382)
        .delete(3, { instant: true })
        .type("给")
        .pause(221)
        .type("n")
        .pause(94)
        .type("i")
        .pause(620)
        .delete(2, { instant: true })
        .type("你")
        .pause(833)
        .type(" ")
        .pause(186)
        .type(" ")
        .pause(705)
        .type("d")
        .pause(73)
        .type("o")
        .pause(71)
        .type("u")
        .pause(810)
        .delete(3, { instant: true })
        .type("逗")
        .pause(206)
        .type("n")
        .pause(94)
        .type("i")
        .pause(363)
        .delete(2, { instant: true })
        .type("你")
        .pause(164)
        .type("k")
        .pause(122)
        .type("a")
        .pause(196)
        .type("i")
        .pause(365)
        .type("x")
        .pause(125)
        .type("i")
        .pause(188)
        .type("n")
        .pause(250)
        .delete(6, { instant: true })
        .type("开心")
        .pause(148)
        .type("！")
        .pause(365)
        .break()
        .pause(365)
        .type("h")
        .pause(77)
        .type("a")
        .pause(77)
        .type("i")
        .pause(217)
        .type("s")
        .pause(9)
        .type("h")
        .pause(102)
        .type("i")
        .pause(410)
        .delete(6, { instant: true })
        .type("还是")
        .pause(498)
        .type("x")
        .pause(121)
        .type("i")
        .pause(110)
        .type("e")
        .pause(276)
        .delete(3, { instant: true })
        .type("写")
        .pause(312)
        .type("y")
        .pause(81)
        .type("i")
        .pause(133)
        .type("d")
        .pause(53)
        .type("i")
        .pause(117)
        .type("a")
        .pause(23)
        .type("n")
        .pause(163)
        .delete(6, { instant: true })
        .type("一点")
        .pause(553)
        .type("h")
        .pause(130)
        .type("a")
        .pause(88)
        .type("o")
        .pause(347)
        .delete(3, { instant: true })
        .type("好")
        .pause(97)
        .type("w")
        .pause(94)
        .type("a")
        .pause(78)
        .type("n")
        .pause(911)
        .delete(3, { instant: true })
        .type("玩")
        .pause(127)
        .type("d")
        .pause(72)
        .type("e")
        .pause(97)
        .delete(2, { instant: true })
        .type("的")
        .pause(167)
        .type("s")
        .pause(89)
        .type("o")
        .pause(166)
        .type("n")
        .pause(173)
        .type("g")
        .pause(520)
        .delete(4, { instant: true })
        .type("送")
        .pause(349)
        .type("g")
        .pause(94)
        .type("e")
        .pause(124)
        .type("i")
        .pause(117)
        .delete(3, { instant: true })
        .type("给")
        .pause(162)
        .type("n")
        .pause(103)
        .type("i")
        .pause(64)
        .delete(2, { instant: true })
        .type("你")
        .pause(228)
        .type("b")
        .pause(104)
        .type("a")
        .pause(579)
        .delete(2, { instant: true })
        .type("吧")



        .type("！")
        .go();
})

</script>

<style scoped>
.page {
    /* 全页默认文字颜色 */
    color: white;
    font-family: sans-serif;
    /* 字体设置 */
}


.love-declaration-up {
    display: flex;
    width: 100vw;
    height: 50vh;
}
.love-declaration-up img {
    width: 10rem;
    height: 10rem;
    border-radius: 50%;
    margin-bottom: 20px;
    /* 居中 */

    position: relative;
    top: 40%;
    left: calc(50% - 16rem);
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
}

.love-declaration-up p {
    display: inline-block;
    height: auto;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.2);
    padding: 20px 0;
    color: white;
    font-size: 30px;
    font-weight: bold;
    text-shadow: 0 0 10px black;
    text-align: center;
    position: absolute;
    top: 45%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
}

.love-declaration {
    /* 对子元素进行弹性布局 */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    /*当子元素超出容器尺寸时，会被隐藏起来。解决屏幕下方出现滑动条问题*/
    /*基础设置 */
    width: 100%;
    height: 999px;
    /* 高度基于背景图高度设置 */
    position: relative;
    /* 相对定位 */
    top: 0;
    background-image: url(@/assets/images/love/u=3717982719,2653439523&fm=253&fmt=auto&app=138&f=JPEG.webp);
    background-repeat: no-repeat;
    /* 只显示一次，不在任何方向重复 */
    /* background-size: cover;     */
    /* 保持图像纵横比例，缩放到足够大，使背景图像可以完全覆盖元素所在区域，可以会导致超出部分无法显示，使得图片看起来不完整，被放大，精细度下降 */
    background-size: contain;
    /* 保持图像纵横比例，缩放到足够大，使背景图像可以完整的显示在元素所在区域，可能无法完全覆盖整个元素区域，其他区域需要底色配合，但精细度保持最高*/
    background-color: #000000;
    /* 背景颜色 配合上面contain无法覆盖的部分 */
    background-position: center top;
    /* 背景图片位置 */
    /* background-attachment: fixed;  滚动时，背景图片固定不动 */
    background-attachment: scroll;
    /* 默认值随着页面元素的滚动而移动 */
    transition: opacity 2s ease;
    /* 页面切换时的过渡效果 */
}


/* From Uiverse.io by Yaksh37 */
button#space-btn {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    border: 0;
    outline: 0;
    border-radius: 11px;
    background: #03001e;
    background: linear-gradient(80deg, #ffcbf2, #ec38bc, #7303c0, #03001e);
    cursor: pointer;
}

.btn-container {
    width: 12rem;
    height: 3rem;
    position: relative;
    overflow: visible;
    border-radius: 11px;
    top: 5rem;
    left: calc(50% - 6rem);
    
}

.btn-container::after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 20px;
    z-index: -1;
    background: #03001e;
    background: linear-gradient(80deg, #ffcbf2, #ec38bc, #7303c0, #03001e);
    filter: blur(20px);
    opacity: 0;
}

.btn-container:hover {
    transform: scale(1.1);
    transition: all 0.6s cubic-bezier(0.15, 0.83, 0.66, 1);
}

.btn-container:hover:after {
    transition: all 0.6s cubic-bezier(0.15, 0.83, 0.66, 1);
    opacity: 1;
}

.btn-container:active {
    transform: scale(1);
}

.btn-container:active:after {
    opacity: 0;
}

button span {
    color: white;
    font-weight: 700;
    font-size: 16px;
}

button#space-btn div.star {
    width: 1px;
    height: 1px;
    background-color: white;
    border-radius: 50%;
    animation: blink 2s cubic-bezier(0.15, 0.83, 0.66, 1) infinite;
}

button#space-btn div.shooting-star {
    width: 80px;
    height: 1px;
    position: absolute;
    background: linear-gradient(80deg, #ffffffff, #ffffff00);
    border-radius: 50%;
    transform: rotate(-40deg);
    opacity: 0;
}

button#space-btn div.shooting-star-1 {
    animation: fallingStar1 4s 6s cubic-bezier(0.15, 0.83, 0.66, 1) infinite;
}

button#space-btn div.shooting-star-2 {
    animation: fallingStar2 2s 10s cubic-bezier(0.15, 0.83, 0.66, 1) infinite;
}

button#space-btn div.shooting-star-3 {
    animation: fallingStar3 8s 20s cubic-bezier(0.15, 0.83, 0.66, 1) infinite;
}

button#space-btn div.shooting-star-4 {
    animation: fallingStar4 4s 6s cubic-bezier(0.15, 0.83, 0.66, 1) infinite;
}

@keyframes blink {
    0% {
        box-shadow: 0 0 10px 0 white;
    }

    50% {
        box-shadow: 0 0 10px 2px white;
    }

    100% {
        box-shadow: 0 0 10px 0 white;
    }
}

@keyframes fallingStar1 {
    0% {
        top: -10px;
        left: 220px;
        opacity: 1;
    }

    100% {
        top: 200px;
        left: -20px;
        opacity: 1;
    }
}

@keyframes fallingStar2 {
    0% {
        top: -10px;
        left: 150px;
        opacity: 1;
    }

    100% {
        top: 200px;
        left: -90px;
        opacity: 1;
    }
}

@keyframes fallingStar3 {
    0% {
        top: -10px;
        left: 80px;
        opacity: 1;
    }

    100% {
        top: 200px;
        left: -160px;
        opacity: 1;
    }
}

@keyframes fallingStar4 {
    0% {
        top: -10px;
        left: 0px;
        opacity: 1;
    }

    100% {
        top: 200px;
        left: -240px;
        opacity: 1;
    }
}
</style>